<template>
  <el-form :label-position="'left'" class="brand-new-aduit" ref="aduitForm" :model="aduit" label-width="80px" :rules="rules">
    <el-form-item label="头像" prop="headimg">
      <el-upload drag action="" :auto-upload="false" list-type="picture" :on-change="_handleChangeHeadimg" :file-list="fileList" :on-remove="_handleDeleteHeadimg">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传 jpg/png 文件，建议比例1:1，且不超过500kb</div>
      </el-upload>
    </el-form-item>

    <el-form-item label="姓名" prop="name">
      <el-input v-model="aduit.name"></el-input>
    </el-form-item>

    <el-form-item label="手机号码" prop="tel">
      <el-input v-model="aduit.tel"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="aduit.password"></el-input>
    </el-form-item>

    <el-form-item label="部门" prop="department_id">
      <el-select v-model="aduit.department_id"  placeholder="请选择部门" @change="_handleChangeDepartment">
        <el-option v-for="item in departmentAndRoles" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="角色" prop="depart_role_id">
      <el-select ref="role_select" v-model="aduit.depart_role_id"  placeholder="请选择角色">
        <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit('aduitForm')">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import '@/styles/brand/newAduit.scss'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      aduit: {
        headimg: null,
        name: '',
        tel: '',
        password: '',
        role: '',
        department_id: '',
        depart_role_id: ''
      },
      fileList: [],
      rules: {
        name: [
          { required: true, message: '请填写姓名！', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请填写联系电话！', trigger: 'blur' },
          { type: 'string', pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, message: '请输入正确联系电话！', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码！', trigger: 'blur' },
          { min: 6, message: '请填写最少6位的密码！', trigger: 'blur' }
        ],
        department_id: [
          { type: 'number', required: true, message: '请选择部门！', trigger: 'blur' }
        ], depart_role_id: [
          { type: 'number', required: true, message: '请选择角色！', trigger: 'blur' }
        ]
      },
      roles: [],
    }
  },

  created() {
    this.setDepartmentAndRole()
  },

  computed: {
    ...mapGetters('brand', [
      'departmentAndRoles'
    ])
  },

  methods: {
    ...mapActions('brand', [
      'setDepartmentAndRole'
    ]),

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    _handleChangeDepartment(val) {
      this.aduit.depart_role_id = ''
      this.roles = this.departmentAndRoles.filter((item) => {
        return item.id === val
      })[0].depart_roles
    },

    _handleChangeHeadimg(file, fileList) {
      this.fileList = [file]
      this.headimg = file
      // console.log('---------', this.headimg)
    },

    _handleDeleteHeadimg(file, fileList) {
      this.fileList = [],
      this.headimg = null
    }
  }
}
</script>